/*
 * @Author: viivLgr 
 * @Date: 2018-05-31 19:05:40 
 * @Last Modified by: viivLgr
 * @Last Modified time: 2018-06-04 17:16:38
 */
import React        from 'react';
import {Link}       from 'react-router-dom';

import PageTitle    from 'component/page-title/index.jsx';
import Pagination   from 'util/pagination/index.jsx';
import TableList from 'util/tableList/index.jsx';

import User         from 'service/user-service.jsx';
import Util         from 'util/util.jsx';

const _user = new User();
const _util = new Util();

class UserList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            pageNum : 1
        }
    }
    componentDidMount(){
        this.loadList();
    }
    loadList(){
        _user.getUserList(this.state.pageNum).then(res => {
            this.setState(res);
        }, errMsg => {
            this.setState({
                list: []
            });
            _util.errorTips(errMsg);
        });
    }
    onPageNumChange(pageNum){
        this.setState({
            pageNum: pageNum
        }, () => {
            this.loadList();
        });
    }
    render() {
        return (
            <div id="page-wrapper">
                <PageTitle title="用户列表"/>
                <TableList tableHeaders={['ID', '用户名', '邮箱', '电话', '注册时间']}>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <tr key={index}>
                                    <td>{item.id}</td>
                                    <td>{item.username}</td>
                                    <td>{item.email}</td>
                                    <td>{item.phone}</td>
                                    <td>{new Date(item.createTime).toLocaleString()}</td>
                                </tr>
                            )
                        })
                    }
                </TableList>
                <Pagination 
                    current={this.state.pageNum || 1}
                    total={this.state.total || 0}
                    pageSize={this.state.pageSize || 10}
                    onChange={(pageNum) => this.onPageNumChange(pageNum)}/>
            </div>
        );
    }
}
export default UserList;